<template>
  <div class="app-container dashboard-container">
    <!-- 顶部标题和快捷操作 -->
    <div class="dashboard-top">
      <div class="header-info">
        <div class="logo-container">
          <img src="../assets/logo/logo.png" alt="金睿智" class="logo-image">
        </div>
        <div class="header-text">
          <div class="system-title">金睿智后台管理系统</div>
          <div class="system-subtitle">专业救援管理 <span class="system-version">v3.8.5</span></div>
        </div>
      </div>
      
      <div class="quick-actions-container">
        <div class="action-cards">
          <div class="action-card" @click="navigateTo('product')">
            <div class="action-icon">
              <i class="el-icon-goods"></i>
            </div>
            <div class="action-title">案件管理</div>
          </div>
          <div class="action-card" @click="navigateTo('order')">
            <div class="action-icon">
              <i class="el-icon-tickets"></i>
            </div>
            <div class="action-title">车辆统计</div>
          </div>
          <div class="action-card" @click="navigateTo('inventory')">
            <div class="action-icon">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="action-title">技师管理</div>
          </div>
          <div class="action-card" @click="navigateTo('customer')">
            <div class="action-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="action-title">客户管理</div>
          </div>
          <div class="action-card" @click="navigateTo('statistics')">
            <div class="action-icon">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="action-title">数据统计</div>
          </div>
          <div class="action-card" @click="navigateTo('settings')">
            <div class="action-icon">
              <i class="el-icon-setting"></i>
            </div>
            <div class="action-title">系统设置</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 本月关键指标卡片 -->
    <div class="kpi-section">
      <div class="section-title">
        <i class="el-icon-data-analysis"></i>
        <span>本月关键指标</span>
      </div>
      <div class="kpi-cards">
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">订单量</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">{{stats.total}}</div>
          <div class="kpi-trend up">
            <i class="el-icon-top"></i>
            <span>4% 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">拒单率</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">4%</div>
          <div class="kpi-trend down">
            <i class="el-icon-bottom"></i>
            <span>1.2% 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">投诉率</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">0%</div>
          <div class="kpi-trend normal">
            <i class="el-icon-right"></i>
            <span>持平</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">案件成功率</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">78.26%</div>
          <div class="kpi-trend up">
            <i class="el-icon-top"></i>
            <span>2.3% 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">拖车40min到达率</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">65.12%</div>
          <div class="kpi-trend up">
            <i class="el-icon-top"></i>
            <span>3.1% 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">拖车直通率</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">45.45%</div>
          <div class="kpi-trend up">
            <i class="el-icon-top"></i>
            <span>1.8% 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">拖车到达时效</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">43.79</div>
          <div class="kpi-trend down good">
            <i class="el-icon-bottom"></i>
            <span>2.1 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">平均到达时效</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">41.85</div>
          <div class="kpi-trend down good">
            <i class="el-icon-bottom"></i>
            <span>1.5 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">拖移30min到达率</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">70%</div>
          <div class="kpi-trend up">
            <i class="el-icon-top"></i>
            <span>5% 较上月</span>
          </div>
        </div>
        <div class="kpi-card">
          <div class="kpi-card-header">
            <span class="kpi-title">拖移到达时效</span>
            <i class="el-icon-warning-outline indicator-icon"></i>
          </div>
          <div class="kpi-value">21.7</div>
          <div class="kpi-trend down good">
            <i class="el-icon-bottom"></i>
            <span>1.3 较上月</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表分析区域 -->
    <div class="charts-section">
      <div class="chart-tabs">
        <div class="tab-header">
          <div class="tab-item active">时效指标</div>
          <div class="tab-item">案例指标</div>
          <div class="tab-item">品质指标</div>
          <div class="tab-item">APP指标</div>
          <div class="tab-item">经验指标</div>
        </div>
        <div class="sub-tabs">
          <div class="sub-tab-item active">
            <i class="el-icon-time"></i>
            <span>拖车40分钟到达率</span>
          </div>
          <div class="sub-tab-item">
            <i class="el-icon-time"></i>
            <span>拖移30分钟到达率</span>
          </div>
          <div class="sub-tab-item">
            <i class="el-icon-time"></i>
            <span>平均到达时效</span>
          </div>
          <div class="sub-tab-item">
            <i class="el-icon-time"></i>
            <span>拖车到达时效</span>
          </div>
          <div class="sub-tab-item">
            <i class="el-icon-time"></i>
            <span>拖移到达时效</span>
          </div>
          <div class="sub-tab-item">
            <i class="el-icon-location"></i>
            <span>地理差异到达时效</span>
          </div>
          <div class="sub-tab-item highlight">
            <i class="el-icon-warning"></i>
            <span>未达标城市可下拉至区县查询实际数据</span>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div ref="performanceChart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import echarts from CDN
import Vue from 'vue';

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5",
      // 统计数据
      stats: {
        total: 82,
        rescue: 43,
        accident: 58,
        repair: 25
      },
      // 图表实例
      charts: {
        performanceChart: null
      },
      // 图表数据
      chartData: {
        days: ['01/3', '02/3', '03/3', '04/3', '05/3', '06/3', '07/3', '08/3', '09/3', '10/3'],
        counts: [5, 2, 7, 6, 3, 6, 3, 4, 5, 7],
        rates: [50, 33.3, 70, 60, 33.3, 60, 33.3, 50, 66.7, 100],
        target: 70
      }
    };
  },
  mounted() {
    // 加载echarts脚本
    this.loadEcharts();
  },
  methods: {
    navigateTo(path) {
      this.$router.push('/' + path);
    },
    
    // 加载echarts脚本
    loadEcharts() {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
      script.onload = () => {
        this.initPerformanceChart();
      };
      document.body.appendChild(script);
    },
    
    // 初始化到达率性能图表
    initPerformanceChart() {
      this.$nextTick(() => {
        this.charts.performanceChart = window.echarts.init(this.$refs.performanceChart);
        this.renderPerformanceChart();
        window.addEventListener('resize', this.resizePerformanceChart);
      });
    },
    
    // 渲染性能图表
    renderPerformanceChart() {
      const data = this.chartData;
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const count = params[0].value;
            const rate = params[1].value;
            return `${params[0].axisValue}<br/>
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3A84FF;"></span>工单数: ${count}<br/>
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFA426;"></span>到达率: ${rate}%`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.days,
          axisLine: {
            lineStyle: {
              color: '#E0E0E0'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '工单数',
            min: 0,
            interval: 2,
            axisLabel: {
              formatter: '{value}',
              color: '#666'
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E0E0E0'
              }
            }
          },
          {
            type: 'value',
            name: '到达率(%)',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%',
              color: '#666'
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '工单数',
            type: 'bar',
            barWidth: '40%',
            data: data.counts,
            itemStyle: {
              color: '#3A84FF'
            },
            emphasis: {
              itemStyle: {
                color: '#5C99FF'
              }
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: '#666'
            },
            z: 10
          },
          {
            name: '到达率',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            data: data.rates,
            itemStyle: {
              color: '#FFA426'
            },
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(255, 164, 38, 0.3)',
              shadowBlur: 10
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%',
              fontSize: 12,
              color: '#666'
            }
          },
          {
            name: '目标线',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'none',
            data: Array(data.days.length).fill(data.target),
            lineStyle: {
              type: 'dashed',
              width: 2,
              color: '#FF5252'
            },
            label: {
              show: true,
              position: 'end',
              formatter: '目标: 70%',
              fontSize: 12,
              color: '#FF5252'
            }
          }
        ]
      };
      
      this.charts.performanceChart.setOption(option);
    },
    
    // 调整图表大小
    resizePerformanceChart() {
      this.charts.performanceChart && this.charts.performanceChart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizePerformanceChart);
    
    // 销毁图表实例
    this.charts.performanceChart && this.charts.performanceChart.dispose();
  }
};
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.dashboard-top {
  display: flex;
  margin-bottom: 20px;
  background-color: #304156;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .header-info {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: white;
    min-width: 280px;
    
    .logo-container {
      margin-right: 15px;
      
      .logo-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.6);
      }
    }
  
    .system-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 3px;
    }
  
    .system-subtitle {
      font-size: 12px;
      opacity: 0.8;
      
      .system-version {
        opacity: 0.7;
        margin-left: 5px;
      }
    }
  }
  
  .quick-actions-container {
    flex: 1;
    padding: 10px 20px;
    background-color: white;
    
    .action-cards {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    
    .action-card {
      padding: 5px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 8px;
      
      &:hover {
        background-color: #EFF5FF;
        
        .action-icon i {
          color: #3A84FF;
        }
      }
  
      .action-icon {
        display: flex;
        justify-content: center;
        margin-bottom: 5px;
  
        i {
          font-size: 22px;
          color: #606266;
          transition: color 0.3s;
        }
      }
  
      .action-title {
        font-size: 13px;
        color: #303133;
      }
    }
  }
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #303133;
  display: flex;
  align-items: center;
  
  i {
    margin-right: 8px;
    font-size: 18px;
    color: #409EFF;
  }
}

/* KPI卡片样式 */
.kpi-section {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #1a2639 100%);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  
  /* 添加装饰元素 */
  &:before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
  }
  
  .section-title {
    color: white;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    
    i {
      color: #64ffda;
      font-size: 20px;
      text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
    }
  }
  
  .kpi-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    position: relative;
    z-index: 1;
    
    /* 添加滚动条样式 */
    &::-webkit-scrollbar {
      height: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  }
  
  .kpi-card {
    flex: 0 0 auto;
    width: 150px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .kpi-card-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      
      .kpi-title {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
      }
      
      .indicator-icon {
        color: #FFB946;
        text-shadow: 0 0 8px rgba(255, 185, 70, 0.5);
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 5px;
      }
    }
    
    .kpi-value {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: 0.5px;
    }
    
    .kpi-trend {
      font-size: 12px;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 5px;
        flex-shrink: 0;
      }
      
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      &.up {
        color: #2ED47A;
        text-shadow: 0 0 8px rgba(46, 212, 122, 0.3);
      }
      
      &.down {
        color: #F7685B;
        text-shadow: 0 0 8px rgba(247, 104, 91, 0.3);
        
        &.good {
          color: #2ED47A;
          text-shadow: 0 0 8px rgba(46, 212, 122, 0.3);
        }
      }
      
      &.normal {
        color: #A0A4A8;
      }
    }
  }
}

/* 图表分析区域 */
.charts-section {
  margin-bottom: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  
  .chart-tabs {
    .tab-header {
      display: flex;
      background-color: #F5F6FA;
      border-bottom: 1px solid #E9EBF0;
      
      .tab-item {
        padding: 12px 20px;
        cursor: pointer;
        position: relative;
        font-size: 14px;
        color: #606266;
        
        &.active {
          color: #3A84FF;
          font-weight: 500;
          
          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #3A84FF;
          }
        }
        
        &:hover:not(.active) {
          color: #303133;
        }
      }
    }
    
    .sub-tabs {
      display: flex;
      flex-wrap: wrap;
      background-color: white;
      padding: 8px 20px;
      border-bottom: 1px solid #E9EBF0;
      
      .sub-tab-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        margin-right: 8px;
        margin-bottom: 8px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        color: #606266;
        
        i {
          margin-right: 5px;
          font-size: 14px;
        }
        
        &.active {
          background-color: #EFF5FF;
          color: #3A84FF;
        }
        
        &:hover:not(.active):not(.highlight) {
          background-color: #F5F7FA;
        }
        
        &.highlight {
          background-color: #FFF3E8;
          color: #FF9A2A;
        }
      }
    }
  }
  
  .chart-container {
    padding: 20px;
    
    .chart {
      width: 100%;
      height: 400px;
    }
  }
}

@media (max-width: 1200px) {
  .dashboard-top {
    flex-direction: column;
    
    .header-info {
      width: 100%;
    }
  }
  
  .kpi-section {
    .kpi-cards {
      gap: 10px;
    }
    
    .kpi-card {
      width: 140px;
      padding: 12px;
    }
  }
}

@media (max-width: 768px) {
  .dashboard-top {
    .quick-actions-container {
      .action-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
    }
  }
  
  .kpi-section {
    padding: 15px;
    
    .section-title {
      margin-bottom: 15px;
    }
    
    .kpi-cards {
      gap: 8px;
    }
    
    .kpi-card {
      width: 135px;
      padding: 12px;
      
      .kpi-value {
        font-size: 20px;
        margin-bottom: 8px;
      }
      
      .kpi-card-header {
        margin-bottom: 8px;
      }
    }
  }
  
  .charts-section {
    .chart-tabs {
      .tab-header {
        overflow-x: auto;
        white-space: nowrap;
      }
      
      .sub-tabs {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
      }
    }
  }
}
</style>
